<template>
  <div class="mission-container">
    <el-container>
        <el-aside>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>单位群组选择</span>
            </div>
            <el-tree
            :props="defaultProps"
            :load="loadNode"
            lazy
            @node-click="handleNodeClick"></el-tree>
          </el-card>
        </el-aside>
        <el-main>
            <!--查询条件-->
            <el-form :inline="true" :model="formInline" class="center-form-inline">
                <el-form-item label="姓名">
                    <el-input v-model="formInline.nick" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="fetchData">查询</el-button>
                    <el-button type="success" @click="reset">刷新</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="addContract">添加</el-button>
                </el-form-item>
            </el-form>
            <!--列表-->
            <el-table style="width: 100%;margin: 10px auto"
                    :data="tableData"
                    v-loading.body="tableLoading"
                    element-loading-text="加载中"
                    border fit highlight-current-row>
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
              <el-table-column width="120" prop="orderNum" label="同级排名"></el-table-column>
              <el-table-column width="200" prop="username" label="姓名"></el-table-column>
              <el-table-column width="120" prop="deptGpName" label="所在群组"></el-table-column>
              <el-table-column width="200" prop="mobile" label="手机号"></el-table-column>
              <el-table-column width="150" label="操作">
                <template slot-scope="scope">
                <el-tooltip content="修改" placement="top">
                    <el-button @click="handleUpdate(scope.$index,scope.row)" size="mini" type="success">修改</el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                    <el-button @click="handleDelete(scope.$index,scope.row)" size="mini" type="danger">删除</el-button>
                </el-tooltip>
                </template>
            </el-table-column>
            </el-table>
            <div style="margin-bottom: 30px;">
            </div>
            <!--分页-->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tablePage.current"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="tablePage.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tablePage.total">
            </el-pagination>
        </el-main>
    </el-container>
    <!--新增弹窗-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="30%">
          <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px">
            <el-form-item label="姓名">
              <el-input v-model="temp.username"></el-input>
            </el-form-item>

            <el-form-item label="手机号">
              <el-input v-model="temp.mobile"></el-input>
            </el-form-item>
            <!--<el-form-item v-if="dialogStatus=='update'" label="单位/群组">
                <el-select v-model="deptName" placeholder="请选择"></el-select>
            </el-form-item>-->
            <el-form-item label="同级排名">
              <el-input v-model="temp.orderNum" width="20px"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button v-if="dialogStatus=='create'" type="success" @click="createData">确定</el-button>
            <el-button v-else type="success" @click="updateData">确定</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
  import userApi from '@/api/user'
  import deptApi from '@/api/dept'
  import groupApi from '@/api/group'

  import {parseTime, resetTemp} from '@/utils'
  import group from "../../../api/group";
  export default {
    name: 'userManage',
    data() {
      return {
        tableLoading: false,
        tableData: [],
        tablePage: {
          current: 1,
          pages: 10,
          size: 10,
          total: 0
        },
        formInline: {
            deptGpId:0,
            nick: '',
        },
        allcheck:false,
        treeData: [{
        }],
        defaultProps: {
          children: 'children',
          label: function(data,node){
            return data.name;
          }
        },
        textMap: {
            add:'添加联系人',
            edit:'修改联系人'
        },
        temp:{
            username:'',
            mobile:'',
            orderNum:'',
            //orderName:'',
        },
        dialogStatus: '',
        dialogFormVisible: false,
        rules: {

        },
      }
    },
    created: function() {
      this.fetchData();
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //分页
      handleSizeChange(val) {
        this.tablePage.size = val;
        this.fetchData();
      },
      handleCurrentChange(val) {
        this.tablePage.current = val;
        this.fetchData();
      },
      //加载叶子节点
      loadNode(node,resolve) {
            let params = {
              parentId: node.level==0?0:node.data.deptGpId
            }
            groupApi.queryDeptGroup(params).then(res => {
                resolve(res.data.data)
            }).catch(res => {
                resolve([]);
            })
          // 这里resolve的数据是后台给的,id用于之后点击发起请求时的参数
      },
      //点击事件
      handleNodeClick(data){
        this.formInline.deptGpId = data.deptGpId
        this.fetchData();
      },
      //查询
      fetchData() {
        this.tableLoading = true
        groupApi.queryAdminGroupPhnum(this.formInline, this.tablePage).then(res => {
          this.tableData = res.data.page.records
          this.tableLoading = false
          this.tablePage.current = res.data.page.current;
          this.tablePage.size = res.data.page.size;
          this.tablePage.total = res.data.page.total;
        })
      },
      //刷新
      reset() {
          this.formInline.nick = '';
          fetchData();
      },
      //修改单位通讯录
            handleUpdate(idx, row) {
                this.temp = Object.assign({}, row) // copy obj
                this.temp.idx = idx
                this.dialogStatus = 'update'
                this.dialogFormVisible = true
                this.$nextTick(() => this.$refs['dataForm'].clearValidate())
            },
            updateData() {
                this.$refs['dataForm'].validate((valid) => {
                    if (!valid) return
                    const tempData = Object.assign({}, this.temp)//copy obj
                    groupApi.updateDeptGroupPhnum(tempData).then(res => {
                        tempData.updated = res.data.updated
                        this.tableData.splice(tempData.idx, 1, tempData)
                        this.dialogFormVisible = false
                        this.$message.success("更新成功")
                    })
                })
            },
      //新增通讯录
      addContract() {
         resetTemp(this.temp)
                this.dialogStatus = 'create'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
        })
      },
      createData() {
                this.$refs['dataForm'].validate((valid) => {
                    if (!valid) return;
                    this.temp.deptGpId = this.formInline.deptGpId==null?1:this.formInline.deptGpId;
                    groupApi.addDeptGroupPhnum(this.temp).then((res) => {
                        this.temp.uid = res.data.uid;//后台传回来新增记录的id
                        this.temp.created = res.data.created;//后台传回来新增记录的时间
                        this.temp.roleList = []
                        this.tableData.unshift(Object.assign({},this.temp))
                        ++this.tablePage.total
                        this.dialogFormVisible = false
                        this.$message.success("添加成功")
                        this.fetchData()
                    })
                })
        },
        //删除
            handleDelete(idx, row) {
                this.$confirm('您确定要将该用户从通讯录删除？', '提示', confirm).then(() => {
                    group.deleteDeptGroupPhnum({phnumId: row.phnumId}).then(res => {
                        this.tableData.splice(idx, 1)
                        --this.tablePage.total
                        this.dialogFormVisible = false
                        this.$message.success("删除成功")
                    })
                }).catch(() => {
                    this.$message.info("已取消删除")
                });

            },
    }
  }
</script>

<style scoped>
.mission-container >>> .el-tabs__content{
    display: none;
}
.center-form-inline {
    padding: 20px 10px 0;
    justify-content: center;
}

.mission-container >>> .el-tree-node__content {
      height: 2.5rem ;
      line-height: 2.5rem;
    }
.mission-container >>> .el-tree-node__label {
      font-size: 1.125rem;
    }
    .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card{
    height: 100%;
    text-align:center;
  }
</style>
